<template>
  <div
    ref="homeLineCharts"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup name="BarChart">
import {
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  markRaw,
} from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";

const homeLineCharts = ref(null);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "350px",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容
const homeLineRef = ref();
const homePieRef = ref();
const homeBarRef = ref();

const version = ref("3.8.4");

const state = reactive({});

function setOptions(chartData) {
  if (chart.value) {
    chart.value.setOption({
      xAxis: {
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        boundaryGap: false,
        axisTick: {
          show: false,
        },
      },
      grid: {
        left: 10,
        right: 30,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
        padding: 8,
      },
      yAxis: {
        axisTick: {
          show: false,
        },
      },
      legend: {
        data: [chartData.title[0], chartData.title[1]],
      },
      series: [
        {
          name: chartData.title[0],

          itemStyle: {
            color: "#3888fa",
            lineStyle: {
              color: "#3888fa",
              width: 2,
            },
            areaStyle: {
              color: "#f3f8ff",
            },
          },
          smooth: true,
          type: "bar",
          data: chartData.expectedData,
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
        {
          name: chartData.title[1],
          smooth: true,
          type: "bar",
          itemStyle: {
            color: "#FF005A",
            lineStyle: {
              color: "#FF005A",
              width: 2,
            },
          },
          data: chartData.actualData,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
      ],
    });
  }
}
function initChart() {
  chart.value = echarts.init(homeLineCharts.value, "macarons");
  setOptions(props.chartData);
}

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style scoped lang="scss"></style>
